<template>
  <div class=" flex align-center ptb20 plr10 b-block " :class="$style.headerFix">
    <div class="text-left flex-1 ">
      <v-icon @click="$emit('leftMenu')" :name="settings.leftIcon " :size="settings.leftSize"></v-icon>
    </div>

    <slot name="content">
      <div class="flex-5 b_FS-32">
        {{ settings.content }}
      </div>
    </slot>
    <div class="text-right flex-1">
      <v-icon @click="$emit('rightMenu')" :name="settings.rightIcon " :size="settings.rightSize"></v-icon>
    </div>
  </div>
</template>

<script type="text/babel">
  export default {
    name: "VHeader",
    props: {
      settings : {
        type: Object ,
        default(){
          return {
            leftIcon : 'zhixiang-zuo' ,
            leftSize : '' ,
            rightIcon : '' ,
            rightSize : '' ,
            content : '' ,
          }
        }
      }
    },
    components: {},
    data() {
      return {}
    },
    created() {
    },
    mounted() {
    },
    beforeDestroy() {
    },
    computed: {},
    methods: {}
  }
</script>

<style module lang='scss'>
  .headerFix{
    position: fixed;
    top: 0 ;
    left: 0 ;
    width: 100%;
  }
</style>
